<template>
	<view class="content">
		<view class="title_box">
			<text class="title_con">贵州健康码</text>
		</view>
		<view class="map">
			<map  class="map_con" :latitude="latitude" :longitude="longitude" :markers="covers">
			</map>
		</view>
		<view class="top">
			<view class="top_con">
				<view class="top_left" @click="cored">
					<view class="top_leftImgBox">
						<image class="top_leftImg" src="../../static/logo.png" mode=""></image>
					</view>
					<view class="top_leftText">信息登记</view>
				</view>
				<view class="top_right" @click="myCard">
					<view class="top_leftImgBox">
						<image class="top_leftImg" src="../../static/logo.png" mode=""></image>
					</view>
					<view class="top_leftText">我的健康卡</view>
				</view>
			</view>
		</view>
		<view class="list1" @click="playCard">
			<view class="left">
				<u-icon class="icon" name="file-text" color="#2979ff" size="40"></u-icon>
				每日健康打卡
			</view>
			<u-icon class="icon" name="arrow-right" color="#c8c9cc" size="30"></u-icon>
		</view>
		<view class="list1" @click="safeUp">
			<view class="left">
				<u-icon class="icon" name="file-text" color="#2979ff" size="40"></u-icon>
				健康申报
			</view>
			<u-icon class="icon" name="arrow-right" color="#c8c9cc" size="30"></u-icon>
		</view>
		<view class="list1">
			<view class="left">
				<u-icon class="icon" name="file-text" color="#2979ff" size="40"></u-icon>
				防疫健康信息码（入境人员版）
			</view>
			<u-icon class="icon" name="arrow-right" color="#c8c9cc" size="30"></u-icon>
		</view>
		<view class="list1">
			<view class="left">
				<u-icon class="icon" name="file-text" color="#2979ff" size="40"></u-icon>
				新冠病毒核酸检测
			</view>
			<u-icon class="icon" name="arrow-right" color="#c8c9cc" size="30"></u-icon>
		</view>
		<view class="dw">
			<view class="dw_con">
				<u-icon class="icon" name="map" color="#c8c9cc" size="30"></u-icon>
			</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude:'',
				longitude:''
			}
		},
		onReady() {
			uni.getLocation({
				 type: 'wgs84',
				success: (res) => {
					this.latitude = res.latitude
					this.longitude = res.longitude
					console.log(res)
					console.log(this.latitude)
					console.log(this.longitude)
				}
			})
		},
		onLoad() {
			
		},
		methods: {
			cored: function() {
				uni.navigateTo({
					url: '../UserInfo/UserInfo',
					  animationType: 'pop-in',
					    animationDuration: 200
				})
			},
			myCard: function() {
				uni.navigateTo({
					url: '../safeCard/safeCard'
				})
			},
			playCard: function() {
				uni.navigateTo({
					url: '../playCard/playCard'
				})
			},
			safeUp: function() {
				uni.navigateTo({
					url: '../safeUp/safeUp'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.title_box {
		width: 100%;
		height: 333rpx;
		background: linear-gradient(to bottom, #2979ff, #a0cfff);
		opacity: 0.8;
		display: flex;
		justify-content: center;
		color: white;
		position: relative;

	}
	.map{
		position: absolute;
		z-index: -99;
		width: 100%;
		height: 89.5%;
	}
	.map_con{
		width: 100%;
		height: 100%;
	}
	.title_con {
		margin-top: 22rpx;
	}

	.top {
		width: 90%;
		height: 252rpx;
		margin-left: 5%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		margin-top: -80rpx;
		z-index: 999;
		position: relative;
		border-radius: 10rpx;
	}

	.top_con {
		width: 80%;
		height: 100%;
		display: flex;
		margin-left: 10%;
		align-items: center;
		justify-content: space-between;
	}

	.top_left,
	.top_right {
		font-size: 30rpx;
		width: 35%;
		height: 180rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.list1 {
		width: 90%;
		height: 90rpx;
		margin-left: 5%;
		margin-top: 40rpx;
		background: white;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10rpx;
	}

	.left {
		width: 80%;
		margin-left: 10%;
		height: 80%;
		display: flex;
		align-items: center;
	}

	.icon {
		position: relative;
		margin-right: 20rpx;
	}

	.top_leftImgBox {
		width: 60%;
		height: 70%;
	}

	.top_leftImg {
		width: 100%;
		height: 100%;
	}

	.dw {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: white;
		position: fixed;
		right: 20rpx;
		bottom: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dw_con {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
	}
</style>
